<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <meta charset="UTF-8">
  <title>个人中心</title>
  <link rel="shortcut icon" href="/img/favicon.ico"/>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/common/layuimini/layuimini.css">
  <link rel="stylesheet" href="/common/layuimini/layui.css" media="all">
  <link rel="stylesheet" href="/common/layuimini/default.css">
  <link rel="stylesheet" href="/common/layuimini/public.css" media="all">
  <style>
    .person-material-more{margin-bottom: 15px;}
    .person-material-title{font-size: 18px;color: #2e2e2e;font-weight:600;}
    .article-index-every{ margin: 10px auto;text-align: left;border-radius:10px;}
  </style>
</head>
<body>
<!--个人中心顶部-->
<div class="layuimini-container article-head" style="margin: 10px auto;text-align: left;height: 50px;">
  <div style="text-align: center;margin: 0 auto;width: 1300px;">
    <div class="layui-form layui-form-pane">
      <div style="float: right; width: 200px; margin: 10px 25px;">
        <button style="" type="button" class="layui-btn layui-btn-normal layui-btn-fluid layui-btn-sm write-article-btn">创作博客</button>
        <!--      <button class="layui-btn layui-btn-primary layui-border-blue write-article-btn">创作博客</button>-->
      </div>
    </div>
    <div th:if="${session.user != null}">
      <input type="hidden" th:value="${session.user.id}" id="userId">
      <div style="float: right; margin: 15px">
        <span><a id="userNav">[[${session.user.nickname}]]</a></span>
      </div>
    </div>
    <div th:if="${session.user == null}">
      <div style="float: right; margin: 15px">
        <span><a href="/login">登录 | 注册</a></span>
      </div>
    </div>
  </div>
</div>

<div th:if="${session.user != null}" style="width: 1200px; text-align: center;margin: 0 auto">
  <div class="layui-panel" style="width: 200px; float: left;">
    <ul class="layui-menu">
      <li>
        <div class="layui-menu-body-title" onclick="personLeftSelect('material')">个人资料</div>
      </li>
      <li>
        <div class="layui-menu-body-title" onclick="personLeftSelect('article')">个人文章</div>
      </li>
      <li>
        <div class="layui-menu-body-title" onclick="personLeftSelect('account')">账号设置</div>
      </li>
      <li>
        <div class="layui-menu-body-title" onclick="personLeftSelect('history')">历史记录</div>
      </li>
      <li>
        <div class="layui-menu-body-title myMessageMenu" onclick="personLeftSelect('message')">我的消息</div>
      </li>
      <li shiro:hasPermission="admin:admin:admin">
        <div class="layui-menu-body-title" onclick="personLeftSelect('admin')">后台</div>
      </li>
    </ul>
  </div>

  <!--基本信息-->
  <div class="person-material" style="display: block; width: 980px; float:right;">
    <div class="layuimini-container person-material-more">
      <div class="layuimini-main">
        <div class="person-material-title">基本资料</div>
        <hr>
        <div class="layui-form-item" style="margin-bottom: 8px;">
          <label class="layui-form-label">用户昵称:</label>
          <div class="layui-form-mid layui-word-aux" id="materialNickname" th:text="${session.user.nickname} == null ? 'user001' : ${session.user.nickname}">user001</div>
          <span style="float: right;margin: 0 15px;"><a style="color: #1e9fff" href="javascript:editMaterial()"><i class="layui-icon">&#xe642;</i>编辑</a></span>
        </div>
        <div class="layui-form-item" style="margin-bottom: 8px;">
          <label class="layui-form-label">邮箱:</label>
          <div class="layui-form-mid layui-word-aux" id="materialEmail" th:text="${session.user.email} == null ? 'blog@qq.com' : ${session.user.email}">blog@qq.com</div>
        </div>
        <div class="layui-form-item" style="margin-bottom: 8px;">
          <label class="layui-form-label">个人描述:</label>
          <div class="layui-form-mid layui-word-aux" id="materialDescription" th:text="${session.user.description} == null ? '这个人很懒' : ${session.user.description}">这个人很懒</div>
        </div>
        <div class="layui-form-item" style="margin-bottom: 8px;">
          <label class="layui-form-label">电话:</label>
          <div class="layui-form-mid layui-word-aux" id="materialPhone" th:text="${session.user.phone} == null ? '188888888888' : ${session.user.phone}">188888888888</div>
        </div>
        <div class="layui-form-item" style="margin-bottom: 8px;">
          <label class="layui-form-label">地址:</label>
          <div class="layui-form-mid layui-word-aux" id="materialAddress" th:text="${session.user.address} == null ? '地球' : ${session.user.address}">地球</div>
        </div>
        <div class="layui-form-item" style="margin-bottom: 8px;">
          <label class="layui-form-label">性别:</label>
          <div class="layui-form-mid layui-word-aux" id="materialSex" th:text="${session.user.sex} == 1 ? '男' : '女'">未知</div>
        </div>
        <div class="layui-form-item" style="margin-bottom: 8px;">
          <label class="layui-form-label">加入时间:</label>
          <div class="layui-form-mid layui-word-aux" id="materialJoinTime" th:text="${session.joinTime}">1999-12-14</div>
        </div>
      </div>
    </div>
    <!--学历信息-->
    <div class="layuimini-container person-material-more">
      <div class="layuimini-main">
        <div class="person-material-title">学历信息</div>
        <hr>
        <div class="layui-form-item" style="margin-bottom: 8px;">
          <label class="layui-form-label">毕业院校:</label>
          <div class="layui-form-mid layui-word-aux" id="eduSchool" th:text="${session.user.eduSchool} == null ? '' : ${session.user.eduSchool}"></div>
          <span style="float: right;margin: 0 15px;"><a style="color: #1e9fff" href="javascript:editEducation()"><i class="layui-icon">&#xe642;</i>编辑</a></span>
        </div>
        <div class="layui-form-item" style="margin-bottom: 8px;">
          <label class="layui-form-label">专业:</label>
          <div class="layui-form-mid layui-word-aux" id="eduSubject" th:text="${session.user.eduSubject} == null ? '' : ${session.user.eduSubject}"></div>
        </div>
        <div class="layui-form-item" style="margin-bottom: 8px;">
          <label class="layui-form-label">毕业时间:</label>
          <div class="layui-form-mid layui-word-aux" id="eduTime" th:text="${session.user.eduTime} == null ? '' : ${#strings.substring(session.user.eduTime,0,10)}"></div>
        </div>
        <div class="layui-form-item" style="margin-bottom: 8px;">
          <label class="layui-form-label">文凭:</label>
          <div class="layui-form-mid layui-word-aux" id="eduGrade" th:text="${session.user.eduGrade} == null ? '' : ${session.user.eduGrade}"></div>
        </div>
      </div>
    </div>
  </div>

  <!--文章信息-->
  <div class="person-article" style="display: none; width: 980px; float:right;">
    <div class="layuimini-container">
      <div class="layuimini-main person-material-title">
        个人文章
      </div>
      <br>
      <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
          <li class="layui-this">全部<span class="article-all-count">(10)</span></li>
          <li>已发布<span class="article-release-count">(9)</span></li>
          <li>公开<span class="article-public-count">(8)</span></li>
          <li>私密<span class="article-private-count">(8)</span></li>
          <li>草稿箱<span class="article-draft-count">(8)</span></li>
        </ul>
        <div class="layui-tab-content">
          <div class="layui-tab-item layui-show">
            <div th:replace="user/article/allArticlequeryBar"></div>
            <hr>
            <!--文章主体-->
            <div id="all-article">
              <hr>
            </div>
          </div>
          <div class="layui-tab-item" id="releaseArticle">已发布</div>
          <div class="layui-tab-item" id="publicArticle">公开</div>
          <div class="layui-tab-item" id="privateArticle">私密</div>
          <div class="layui-tab-item" id="draftArticle">草稿箱</div>
        </div>
      </div>
    </div>
  </div>

  <div class="person-account" style="display: none; width: 980px; float:right;">
    <div class="layuimini-container">
      <div class="layuimini-main">
        账号设置
      </div>
    </div>
  </div>

  <div class="person-message" style="display: none; width: 980px; height: 30px; float:right;">
    <div class="layuimini-container">
      <div class="layuimini-main person-material-title">
        我的消息
      </div>
    </div>
    <div id="message-content">
<!--      <div class="layuimini-container article-index-every">-->
<!--        <div class="layuimini-main">-->
<!--          <h3><span style="margin-right: 3px;"><i class="layui-icon layui-icon-tips"></i></span> <a href="javascript:void(0)">您发布的评论涉嫌违规，已被删除，请知悉</a></h3>-->
<!--        </div>-->
<!--        <div class="layuimini-main" style="font-size: 16px;">-->
<!--          <div style="margin-bottom: 10px;">-->
<!--            <span>评论文章:</span>-->
<!--            <span><a style="color: #2D93CA" href="javascript:alert('6666')">《测试博客》</a></span>-->
<!--          </div>-->
<!--          <div style="margin-bottom: 10px;">-->
<!--            <span>评论内容:</span>-->
<!--            <span><u>傻逼，什么垃圾文章</u></span>-->
<!--          </div>-->
<!--          <div>-->
<!--            <span>评论时间:</span>-->
<!--            <span>2022-03-25 17:33:00</span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
    </div>
  </div>

  <div class="person-history" style="display: none; width: 980px; float:right;">
    <div class="layuimini-container">
      <div class="layuimini-main person-material-title">
        观看记录
      </div>
      <br>

      <div id="articleHistory" style="text-align: left !important; margin-left: 30px;">
        <ul class="layui-timeline">
          <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
              <h3 class="layui-timeline-title">今天</h3>
              <div id="today">
                <p style="font-size: medium"><a style="margin-right: 10px; color: black" href="javascript:void(0)">java冒泡排序</a>admin</p>
              </div>
            </div>
          </li>
          <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
              <h3 class="layui-timeline-title">昨天</h3>
              <div id="yesterday">
                <p style="font-size: medium"><a style="margin-right: 10px; color: black" href="javascript:void(0)">java冒泡排序</a>admin</p>
              </div>
            </div>
          </li>
          <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
              <h3 class="layui-timeline-title">更早</h3>
              <div id="earlier">
                <p style="font-size: medium"><a style="margin-right: 10px; color: black" href="javascript:void(0)">java冒泡排序</a>admin</p>
              </div>
            </div>
          </li>
        </ul>
        <!--        <hr>-->
<!--        <div>-->
<!--          <div class="layuimini-main">-->
<!--            <h2><a href="javascript:getArticleDetail('304cf7de59c84615815c940e367b94a0')">java冒泡排序</a></h2>-->
<!--          </div>-->
<!--          <div class="layuimini-main">-->
<!--            <a>2021-11-22</a>&nbsp;&nbsp;-->
<!--            <span class="layui-badge-rim"><a href="/article/categoty/java">java</a></span>-->
<!--          </div>-->
<!--        </div>-->
<!--        <hr>-->
      </div>
    </div>
  </div>

</div>
</body>
<script type="text/javascript" src="/common/layui/layui.js"></script>
<script type="text/javascript" src="/common/jquery-1.11.3.js"></script>
<script type="text/javascript" src="/common/xm-select/xm-select.js"></script>
<script>

  window.onload = function () {
    //查询文章数量
    queryArticleCount();
    //通过作者查询所有的文章
    queryArticleByCondition();

    //获取博客
    getAllArticleById();

    //查询个人浏览记录
    queryArticleHistory();

    //查询是否存在消息
    queryMessage();
  }

  function queryMessage(){
    $.ajax({
      type: "get",
      url: "/comment/user/queryNewMessage",
      success: function (res){

        var count = 0;
        if (res.state){
          var data = res.data;
          var messageHtml = "";
          for (var i = 0; i < data.length; i++) {
            if (data[i].readState == 0){
              count++;
            }

            messageHtml = messageHtml + "<div class=\"layuimini-container article-index-every\">\n" +
                    "        <div class=\"layuimini-main\">\n" +
                    "          <h3><span style=\"margin-right: 3px;\"><i class=\"layui-icon layui-icon-tips\"></i></span> <a href=\"javascript:void(0)\">您的评论涉嫌违规已被删除，请知悉</a></h3>\n" +
                    "        </div>\n" +
                    "        <div class=\"layuimini-main\" style=\"font-size: 16px;\">\n" +
                    "          <div style=\"margin-bottom: 10px;\">\n" +
                    "            <span>评论文章:</span>\n" +
                    "            <span><a style=\"color: #2D93CA\" href=\"javascript:alert('6666')\">《测试博客》</a></span>\n" +
                    "          </div>\n" +
                    "          <div style=\"margin-bottom: 10px;\">\n" +
                    "            <span>删除原因:</span>\n" +
                    "            <span>"+data[i].messageContent+"</span>\n" +
                    "          </div>\n" +
                    // "          <div>\n" +
                    // "            <span>评论时间:</span>\n" +
                    // "            <span>2022-03-25 17:33:00</span>\n" +
                    // "          </div>\n" +
                    "        </div>\n" +
                    "      </div>"
          }

          if (count > 0){
            $(".myMessageMenu").attr("onclick","personLeftSelect('message');readMyMessage()")

            //加入存在消息，给我的消息导航栏加上未读标识
            var countHtml = "我的消息<span class=\"layui-badge\">"+count+"</span>";
            $(".myMessageMenu").html(countHtml);
          }
          $("#message-content").html(messageHtml);


        }
      }
    })
  }

  //假如存在新消息，点击后更改阅读状态
  function readMyMessage(){
    $(".myMessageMenu").html("我的消息");
    $.ajax({
      type: "post",
      url: "/message/readMyMessage",
      success: function (res){

      }
    })
  }

  //初始化年
  var month;
  var year = xmSelect.render({
    el: '.yearTime',
    radio: true,
    model: {
      icon: 'hidden',
      label: {
        type: 'text'
      }
    },
    clickClose: true, //点击之后关闭
    tips: '年',
    theme: {
      color: '#0081ff',
    },
    data: [
      {name:'不限',value: ''},
      {name: '2022', value: '2022'},
      {name: '2021', value: '2021'},
      {name: '2020', value: '2020'},
      {name: '2019', value: '2019'},
    ],
    on:function (data){
      //获取选中数据
      var arr = data.arr;
      if (arr[0].name=='不限'){
        month = xmSelect.render({
          el: '.monthTime',
          radio: true,
          model: {
            icon: 'hidden',
            label: {
              type: 'text'
            }
          },
          clickClose: true, //点击之后关闭
          tips: '月',
          theme: {
            color: '#0081ff',
          },
          data: [
            {name:'不限',value: ''}
          ]
        })
      }else {
        month = xmSelect.render({
          el: '.monthTime',
          radio: true,
          model: {
            icon: 'hidden',
            label: {
              type: 'text'
            }
          },
          clickClose: true, //点击之后关闭
          tips: '月',
          theme: {
            color: '#0081ff',
          },
          data: [
            {name:'不限',value: ''},
            {name: '1月', value: '01'},
            {name: '2月', value: '02'},
            {name: '3月', value: '03'},
            {name: '4月', value: '04'},
            {name: '5月', value: '05'},
            {name: '6月', value: '06'},
            {name: '7月', value: '07'},
            {name: '8月', value: '08'},
            {name: '9月', value: '09'},
            {name: '10月', value: '10'},
            {name: '11月', value: '11'},
            {name: '12月', value: '12'},
          ]
        })
      }
    }
  })



  month = xmSelect.render({
    el: '.monthTime',
    radio: true,
    model: {
      icon: 'hidden',
      label: {
        type: 'text'
      }
    },
    clickClose: true, //点击之后关闭
    tips: '月',
    theme: {
      color: '#0081ff',
    },
    data: [
      {name:'不限',value: ''}
    ]
  })
  var articleCategory = xmSelect.render({
    el: '.articleCategory',
    radio: true,
    clickClose: true, //点击之后关闭
    model: {
      icon: 'hidden',
      label: {
        type: 'text'
      }
    },
    tips: '文章分类',
    theme: {
      color: '#0081ff',
    },

    data: getCategoryData()
  })

  function queryArticleByCondition(){
    var userId = $("#userId").val();
    var yearTime = year.getValue('valueStr');
    var monthTime = month.getValue('valueStr');
    var category = articleCategory.getValue('valueStr');
    var articleTitle = $('input[name = articleTitle]').val()

    $.ajax({
      url: "/article/index/queryArticleByCondition",
      type: "get",
      dataTtpe: "json",
      data:{
        "authorId":userId,
        "yearTime":yearTime,
        "monthTime":monthTime,
        "category":category,
        "articleTitle":articleTitle
      },
      success: function (res){
        var articleHtml = showArticle(res.data);
        $("#all-article").html(articleHtml);
      }
    })
  }

  function getAllArticleById(){

    var userId = $("#userId").val();
    $.ajax({
      type: "get",
      url: "/article/index/queryAllArticleById",
      data:{
        "userId":userId
      },
      success: function (res){
        var data = res.data;
        // var dataHtml = showArticle(data);
        // $("#all-article").html(dataHtml);

        var releaseArticle = new Array();//已发布博客
        var publicArticle = new Array();//公开博客
        var privateArticle = new Array();//私密博客
        var draftArticle = new Array();//私密博客
        for (var i = 0; i < data.length; i++) {
          //已发布博客
          if (data[i].issued == '1'){
            releaseArticle.push(data[i]);
          }
          //公开博客
          if (data[i].releaseForm == '1'){
            publicArticle.push(data[i]);
          }
          //私密博客
          if (data[i].releaseForm == '2'){
            privateArticle.push(data[i]);
          }
          //草稿箱
          if (data[i].issued == '2'){
            draftArticle.push(data[i]);
          }
        }
        var releaseHtml = showArticle(releaseArticle);
        $("#releaseArticle").html(releaseHtml);

        var publicArticleHtml = showArticle(publicArticle);
        $("#publicArticle").html(publicArticleHtml);

        var privateArticleHtml = showArticle(privateArticle);
        $("#privateArticle").html(privateArticleHtml);

        var draftArticleHtml = showArticle(draftArticle);
        $("#draftArticle").html(draftArticleHtml);
      }
    })
  }

  /**
   * 博客展示
   */
  function showArticle(data) {
    var str = '';
    for (var i = 0; i < data.length; i++) {
      str = str + '<div style="margin: 10px 30px">\n' +
              '                <div>\n' +
              '                  <div class="layuimini-main">\n' +
              '                    <h2><a href="javascript:getArticleDetail(\''+data[i].articleNum+'\',\''+data[i].issued+'\')">' + data[i].title + '</a></h2>\n' +
              '                  </div>\n' +
              '                  <div class="layuimini-main">\n' +
              '                    <a>' + data[i].createTime.slice(0, 10) + '</a>&nbsp;&nbsp;\n';
      if (data[i].categoryName != undefined && data[i].issued == 1) {
        var arr = data[i].categoryName.split(',');
        for (var j = 0; j < arr.length; j++) {
          str = str + '<span class="layui-badge-rim"><a href="/article/categoty/' + arr[j] + '">' + arr[j] + '</a></span>\n'
        }
      }
      str = str + '</div>\n' + '</div>\n' + '</div><hr>';

    }
    return str;
  }

  /*
  *
  * */
  function getArticleDetail(articleId, articleIssued) {
    if (articleIssued==2){
      window.open("/article/write?articleNum="+articleId);
      return;
    }
    window.open("/article/getArticleDetail/" + articleId);
  }

  $(".write-article-btn").click(function (){
    window.open("/article/write")
  })
  /**
   * 获取博客分类下拉框数据
   */
  function getCategoryData(){
    var catagoryData;
    $.ajax({
      url: "/category/queryAllCategory",
      type: "post",
      async:false,//取消异步请求
      success: function (res){
        var data = res.data;
        var dataValue = new Array();
        for (var i = 0; i < data.length; i++) {
          var array = data[i];
          var obj = new Object();
          obj.name = array.categoryName;
          obj.value = array.id;
          dataValue.push(obj);
        }
        catagoryData = dataValue;
      }
    })
    return catagoryData;
  }

  function queryArticleCount(){
    $.ajax({
      url:"/user/index/queryArticleCount",
      type: "get",
      success:function (res){
        if (res.state == true){
          $(".article-all-count").html("("+res.data.allCount+")");
          $(".article-release-count").html("("+res.data.releaseCount+")");
          $(".article-public-count").html("("+res.data.publicCount+")");
          $(".article-private-count").html("("+res.data.privateCount+")");
          $(".article-draft-count").html("("+res.data.draftCount+")");
        }
      }
    })
  }

  function personLeftSelect(type){
    if (type == 'material'){
      $(".person-material").css("display","block");
      $(".person-article").css("display","none");
      $(".person-account").css("display","none");
      $(".person-history").css("display","none");
      $(".person-message").css("display","none");
    }
    if (type == 'article'){
      $(".person-material").css("display","none");
      $(".person-article").css("display","block");
      $(".person-account").css("display","none");
      $(".person-history").css("display","none");
      $(".person-message").css("display","none");
    }
    if (type == 'account'){
      $(".person-material").css("display","none");
      $(".person-article").css("display","none");
      $(".person-account").css("display","block");
      $(".person-history").css("display","none");
      $(".person-message").css("display","none");
    }
    if (type == 'history'){
      $(".person-material").css("display","none");
      $(".person-article").css("display","none");
      $(".person-account").css("display","none");
      $(".person-message").css("display","none");
      $(".person-history").css("display","block");
    }
    if (type == 'message'){
      $(".person-material").css("display","none");
      $(".person-article").css("display","none");
      $(".person-account").css("display","none");
      $(".person-history").css("display","none");
      $(".person-message").css("display","block");

    }
    if (type == 'admin'){
      window.location.href="/admin"
    }
  }

  function editMaterial(){
    var userId = $("#userId").val();
    layer.open({
      type: 2,
      title: '',
      shadeClose: true,
      shade: false,
      // maxmin: true, //开启最大化最小化按钮
      area: ['800px', '370px'],
      move: false,
      content: '/user/index/editMaterial'
    });
  }


  function queryArticleHistory(){
    $.ajax({
      url: "/article/index/queryArticleHistory",
      type: "get",
      success:function (res){
        var earlyList =res.data.earlyList;
        var todayList =res.data.todayList;
        var yesterdayList =res.data.yesterdayList;

        if (earlyList != null){
          if (earlyList.length>0){
            var earlyHtml =  showHistoryArticle(earlyList);
          }else {
            earlyHtml = '<p style="font-size: medium">记录为空哦</p>';
          }
        }

        if (todayList != null){
          if (todayList.length>0){
            var todayHtml =  showHistoryArticle(todayList);
          }else {
            todayHtml = '<p style="font-size: medium">记录为空哦</p>';
          }
        }

        if (yesterdayList != null){
          if (yesterdayList.length>0){
            var yesterdayHtml =  showHistoryArticle(yesterdayList);
          }else {
            yesterdayHtml = '<p style="font-size: medium">记录为空哦</p>'
          }
        }
        $("#today").html(todayHtml);
        $("#yesterday").html(yesterdayHtml);
        $("#earlier").html(earlyHtml);
      }
    })
  }

  function editEducation(){
    var userId = $("#userId").val();
    layer.open({
      type: 2,
      title: '',
      shadeClose: true,
      shade: false,
      // maxmin: true, //开启最大化最小化按钮
        area: ['800px', '450px'],
      move: false,
      content: '/user/index/editEducation'
    });
  }

  function showHistoryArticle(data){
    var str = '';
    for (var i = 0; i < data.length; i++) {
      str = str + '<p style="font-size: medium"><a style="margin-right: 10px; color: black" href="javascript:getArticleDetail(\''+data[i].articleNum+'\')">java冒泡排序</a>admin</p>\n';
    }
    return str;
  }

  layui.use(['dropdown','form'],function(){
    var dropdown = layui.dropdown;

    dropdown.render({
      elem: '#userNav'
      ,trigger: 'hover'
      ,align: 'center'
      ,style: 'text-align: center'
      ,data: [{
        title: '个人中心'
        ,id: 'person'
      },{
        title: '草稿箱'
        ,id: 'draft'
      },{
        title: '退出登录'
        ,id: 'logout'
      }],
      click: function(obj){
        if (obj.id == 'person'){
          var userId = $("#userId").val();
          window.location.href="/user/index/personCenter";
        }
        if (obj.id == 'logout'){
          layer.confirm('确定要退出登录吗', {
            btn: ['确定','取消'] //按钮
          }, function(){
            window.location.href = "/user/logout"
          }, function(){
          });
        }
      }
    });
  })
</script>
</html>
